<template>
	<view class="numbox">
		<button :disabled="min>inputValue||min==inputValue||disabled" @click="minus" class="minus"
			:style="{background:bgColor}">
			-
		</button>
		<input type="number" @focus="focus=true" @blur="focus=false" :value="inputValue" @input="inputChange"
			:style="{background:bgColor}" :disabled="disabled||asyncType" />
		<button :disabled="max<inputValue||disabled||max==inputValue" @click="add" :style="{background:bgColor}">
			+
		</button>
	</view>
</template>

<script>
	export default {
		props: {

			min: {
				type: Number,
				default: -9999999
			},
			value: {
				type: Number,
				default: -9999999
			},
			max: {
				type: Number,
				default: 9999999
			},
			disabled: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0
			},
			bgColor: {
				type: String,
				default: '#F8F8F8'
			},
			asyncType: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				inputValue: 0,
				timer: null
			}
		},
		mounted() {
			this.inputValue = this.value
		},
		methods: {
			add() {
				if (this.asyncType) return
				this.inputValue += 1
				this.$emit('change', { type: 'add', value: this.inputValue })
			},
			minus() {
				if (this.asyncType) return
				this.inputValue = this.inputValue - 1
				this.$emit('change', { type: 'minus', value: this.inputValue })
			},
			inputChange(e) {
				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					this.$emit('change', { type: 'input', value: this.inputValue })
				}, 800)
			}

		}

	}
</script>

<style lang="scss" scoped>
	$size:60;

	.numbox {
		display: flex;
		font-size: 26rpx;

		button {
			width: $size+rpx;
			height: $size+rpx;
			line-height: $size+rpx;
			text-align: center;
			background: #FFFFFF;
			padding: 0;
			font-size: 44rpx;
			margin: 0;
		}

		button::after {
			border: 0;
		}

		input {
			width: 60rpx;
			height: $size+rpx;
			line-height: $size+rpx;
			text-align: center;
			margin: 0 8rpx;
			background: #FFFFFF;
		}

		.minus {}
	}
</style>
